<template>
    <div>
      <el-card style="margin-bottom: 10px">
        <template #header>
          <span>查询条件</span>
        </template>
        <el-form label-width="auto">
          <el-row justify="space-between">
            <el-col :span="8">
              <el-form-item label="活动名称">
                <el-input v-model="queryParams.activity_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="活动日期">
                <el-date-picker
                    v-model="queryParams.date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 400px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="display: flex;justify-content: right">
              <el-form-item label="具体时间">
                <el-time-select
                    v-model="queryParams.startTime"
                    style="width: 400px"
                    placeholder="具体时间"
                    :picker-options="{
                      start: '00:00',
                      step: '00:15',
                      end: '24:00',
                    }"
                >
                </el-time-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="space-between">
            <el-col :span="8">
              <el-form-item label="活动地点">
                <el-input v-model="queryParams.place"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发布状态">
                <el-select v-model="queryParams.status" placeholder="全部">
                  <el-option value="" label="全部"/>
                  <el-option value="1" label="已发布"/>
                  <el-option value="0" label="未发布"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="display: flex;justify-content: right">
              <el-button type="primary" icon="el-icon-search" @click="Query(1)">查询</el-button>
              <el-button type="primary" icon="el-icon-delete" @click="Reset()">重置</el-button>
            </el-col>
          </el-row>
          <el-row justify="space-between"></el-row>
        </el-form>
      </el-card>
      <el-card>
        <template #header>
          <div style="display: flex;justify-content: space-between">
            <div>
              <span>查询结果</span>
            </div>
            <div>
              <!-- <el-button icon="el-icon-plus" type="primary" size="small" @click="showAdd">发布活动</el-button> -->
            </div>
          </div>
        </template>
        <el-table :data="tableData" border style="margin-bottom: 10px">
          <el-table-column prop="activity_name" label="活动名称" align="center"></el-table-column>
          <el-table-column label="活动时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.date }} {{ scope.row.startTime }}
            </template>
          </el-table-column>
          <el-table-column prop="place" label="活动地点" align="center"></el-table-column>
          <el-table-column prop="status" label="审核状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status==='0'"><span style="color: orange">未审核</span></span>
              <span v-if="scope.row.status==='1'"><span style="color: #00b42a">审核通过</span></span>
              <span v-if="scope.row.status==='2'"><span style="color: #e72f2f">审核不通过</span></span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" style="color: #e72f2f" size="small" @click="showDialog(scope.row, 1)">详情</el-button>
              <el-button v-if="scope.row.status==='0'" type="text" style="color: #e72f2f" size="small" @click="showDialog(scope.row, 2)">审核</el-button>
              <el-button size="small" type="text" style="color: #e72f2f" @click="showDialog(scope.row, 3)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: right">
          <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <!-- 删除对话框 -->
      <el-dialog title="删除活动信息" :visible.sync="deleteDialog" width="30%">
        <span>确定要删除这条信息吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialog = false">取 消</el-button>
          <el-button type="primary" @click="DeleteMethod(currentOpt._id)">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 审核对话框 -->
      <el-dialog title="审核活动" :visible.sync="updateDialog" width="30%">
        <el-form :model="activityForm">
          <el-form-item label="审核状态" :label-width="formLableWidth">
            <el-select v-model="currentOpt.status">
              <el-option value="0" label="待审核" />
              <el-option value="1" label="通过" />
              <el-option value="2" label="不通过" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLableWidth">
            <el-input v-model="currentOpt.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialog = false">取 消</el-button>
          <el-button type="primary" @click="UpdateMethod(currentOpt)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import router from "../../router.js";
  export default {
    mounted() {
      this.Query(1);
    },
    data() {
      return {
        total:0,
        queryParams:{
          activity_name: "",
          date: "",
          startTime: "",
          place: "",
          status: "",
          pageNo: 1
        },
        currentOpt: {
          _id: "",
          activity_name: "",
          place: "",
          date: "",
          status:"",
          remark:"",
          startTime: "",
        },
        // 添加党建活动的表单数据
        activityForm: {
          activity_name: "",
          date: "",
          startTime: "",
          place: "",
          status: "0",
          remark: "",
          participants: [],
        },
        //添加对话框style
        formLableWidth: "80px",
        //展示所有活动信息数组
        tableData: [],
        tableData1: [],
        // 几种对话框的标志位
        deleteDialog: false,
        updateDialog: false,
        filterDialog: false,
        addDialog: false,
        //展示所有用户信息数组的长度
        // odataLength: 0,
      };
    },
    methods: {
      // 切换页号
      handleCurrentChange(val){
        this.Query(1);
      },
      //重置查询表单
      Reset(){
        this.queryParams  = {
          activity_name: "",
          date: "",
          startTime: "",
          place: "",
          status: "",
          pageNo: 1
        }
      },
      // 查询党建活动接口
      async Query(pageNo) {
        this.tableData = [];
        this.tableData1 = [];
        let res = await this.$axios({
          url: "/api/activitylist",
          method: "post",
          data:this.queryParams
        });
        if (res && res.status === 200) {
          // this.$message({showClose: true,message: "查询成功",type: "success",});
          this.total = res.data.pager.Total;
          for (let i = 0; i < res.data.data.length; i++) {
            const temp = JSON.parse(res.data.data[i]);
            this.tableData1.push(temp);
            // temp.date = temp.date + " " + temp.startTime;
            this.tableData.push(temp);
          }
          // this.tableData = res.data.data;
          // this.tableData1 = res.data.data;
        }
      },
      // 删除党建活动
      async DeleteMethod(_id) {
        this.deleteDialog = false;
        let res = await this.$axios({
          url: "/api/deleteactivity",
          method: "post",
          data: {
            _id,
          },
        });
        // console.log(res);
        if (res && res.data.status === 1) {
          this.Query(1);
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "error",
          });
        }
      },
      // 修改党建活动接口
      async UpdateMethod(currentOpt) {
        this.updateDialog = false;
        currentOpt.date = this.transformDate(currentOpt.date);
        let {_id, activity_name, date, startTime, place, status, remark} = currentOpt;
        let res = await this.$axios({
          url: "/api/editactivity",
          method: "post",
          data: {_id, activity_name, date, startTime, place,status, remark},
        });
        if (res && res.data.status === 1) {
          this.Query(1);
          this.$message({
            showClose: true,
            message: "恭喜你，修改成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "修改失败，请检查是否有空信息",
            type: "error",
          });
        }
      },
      // 添加党建活动接口
      async AddMethod() {
        let res = await this.$axios({
          url: "/api/addactivity",
          method: "post",
          data: this.activityForm,
        });
        console.log(res);
        if (res && res.data.status === 1) {
          this.Query(1);
          this.$message({
            showClose: true,
            message: "发布成功",
            type: "success",
          });
          this.addDialog = false;
          this.resetMethod();
        } else {
          this.$message({
            showClose: true,
            message: "发布失败",
            type: "error",
          });
        }
      },
      //展示对话框
      showDialog(row, index) {
        //1---详情
        //2---修改
        //3---删除
        this.currentOpt._id = row._id;
        this.currentOpt.activity_name = row.activity_name;
        this.currentOpt.place = row.place;
        this.currentOpt.status = row.status;
        this.currentOpt.date = row.date;
        this.currentOpt.startTime = row.startTime;
        this.currentOpt.remark = row.remark;
        for (let i = 0; i < this.tableData1.length; i++) {
          if (this.tableData1[i]._id === row._id) {
            this.currentOpt.date = this.tableData1[i].date;
            this.currentOpt.startTime = this.tableData1[i].startTime;
          }
        }
        if (index === 1) {
          //详情
          // console.log(row)
          router.push({name: "activityLog", params: {activity_id: row._id}});
        } else if (index === 2) {
          //修改
          this.updateDialog = true;
        } else {
          //删除
          this.deleteDialog = true;
        }
      },
      // 展示添加对话框
      showAdd() {
        this.resetMethod();
        this.addDialog = true;
      },
      // 重置添加党建信息的表单
      resetMethod() {
        this.activityForm = {
          activity_name: "",
          date: "",
          startTime: "",
          place: "",
          status: "0",
          remark: "",
          participants: [],
        };
      },
      //处理时间格式
      transformDate(param) {
        const date = new Date(param);
        // 提取并格式化年、月、日
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1
        const day = String(date.getDate()).padStart(2, "0"); // 日期可能是1-9，需要补0
        // 组合成年-月-日的格式
        const formattedDate = `${year}-${month}-${day}`;
        return formattedDate;
      },
      // 导入数据
      // handleChange(file, fileList) {
      // 	let reader = new FileReader();
      // 	reader.onload = (e) => {
      // 		let data = new Uint8Array(e.target.result);
      // 		let workbook = XLSX.read(data, {
      // 			type: 'array'
      // 		});
      // 		// 处理sheet1
      // 		let worksheetName = workbook.SheetNames[0];
      // 		let worksheet = workbook.Sheets[worksheetName];
      // 		let jsonData = XLSX.utils.sheet_to_json(worksheet, {
      // 			header: 1
      // 		});
      // 		console.log(jsonData);
      // 		for (let i = 1; i < jsonData.length; i++) {
      // 			this.form.name = jsonData[i][0];
      // 			this.form.sex = jsonData[i][1];
      // 			this.form.age = jsonData[i][2]
      // 			this.form.join_time = jsonData[i][3];
      // 			this.form.work_unit = jsonData[i][4];
      // 			this.form.position = jsonData[i][5];
      // 			this.form.work_status = jsonData[i][6];
      // 			this.AddMethod(this.form);
      // 		}
      // 	}
      // 	reader.readAsArrayBuffer(file.raw);
      // },
      // 导出数据
      // exportExcel() {
      // 	// 处理数据
      // 	let tableData = [];
      // 	for (let i = 0; i < this.odata.length; i++) {
      // 		let obj = {};
      // 		obj.name = this.odata[i].name;
      // 		obj.age = this.odata[i].age;
      // 		obj.sex = this.odata[i].sex;
      // 		obj.join_time = this.odata[i].join_time;
      // 		obj.work_unit = this.odata[i].work_unit;
      // 		obj.position = this.odata[i].position;
      // 		obj.work_status = this.odata[i].work_status;
      // 		tableData.push(obj);
      // 	}
      // 	// 将表格数据转换为工作表
      // 	let worksheet = XLSX.utils.json_to_sheet(tableData);
      // 	// console.log(worksheet);
      // 	worksheet.A1.v = "姓名";
      // 	worksheet.B1.v = "年龄";
      // 	worksheet.C1.v = "性别";
      // 	worksheet.D1.v = "入党时间";
      // 	worksheet.E1.v = "工作单位";
      // 	worksheet.F1.v = "职位";
      // 	worksheet.G1.v = "工作状态";
      // 	// 创建新的工作簿并添加到工作表
      // 	let workbook = XLSX.utils.book_new();
      // 	XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      // 	// 将工作簿写入文件
      // 	let wbout = XLSX.write(workbook, {
      // 		bookType: 'xlsx',
      // 		type: 'array'
      // 	});
      // 	// 使用file-saver保存文件
      // 	try {
      // 		saveAs(new Blob([wbout], {
      // 			type: 'application/octet-stream'
      // 		}), '党员信息.xlsx');
      // 	} catch (e) {
      // 		if (typeof console !== 'undefined') console.log(e, wbout);
      // 	}
      // 	return wbout;
      // },
    },
  };
  </script>
  <style scoped>
  .hao {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  
  .a {
    margin-bottom: 30px;
  }
  .el-input{
    width: 400px;
  }
  .el-select{
    width: 400px;
  }
  </style>